<template>
  <div>
  <component :is="componentName" style="display: inline-block; width: 100%;" :fvData="fvData" @blur="lostFocus" @define-event="handleEvent($event)" />
    <div style="position: relative">
      <span style="position: absolute; right: -10px; top: -30px; z-index: 99"><LinkDropdown :fv-data="fvData" @define-event="handleEvent($event)"></LinkDropdown></span>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import FvInput from './FvInput'
import NvButton from './NvButton'
import TreeInput from './TreeInput'
import FvSelect from './FvSelect'
import FvSwitch from './FvSwitch'
import FvFilterSelect from './FvFilterSelect'
import AutoComplete from './AutoComplete'
import DataSourceSelect from './DataSourceSelect'
import FvFilterInput from './FvFilterInput'
import FvDateInput from './FvDateInput'
import FvDatetimeInput from './FvDatetimeInput'
import FvTextArea from './FvTextArea'
import ConstDef from '../../js/ConstDef'
import LinkDropdown from './LinkDropdown'
import FvTreeSelect from './TreeSelect'
export default {
  name: 'BaseComponent',
  components: {
    FvInput,
    NvButton,
    TreeInput,
    FvSelect,
    FvSwitch,
    FvFilterSelect,
    AutoComplete,
    DataSourceSelect,
    FvFilterInput,
    LinkDropdown,
    FvDateInput,
    FvDatetimeInput,
    FvTextArea,
    FvTreeSelect
  },
  props: {
    fvData: {
      type: Object,
      default: null
    }
  },
  setup(props) {
    const fvLayout = computed(() => {
      return props.fvData.fdLayout
    })

    const componentName = computed(() => {
      const controlType = props.fvData.fdLayout.controlType;
      if (controlType === ConstDef.CONTROL_TYPE_BUTTON) {
        return 'NvButton'
      } else if (controlType === ConstDef.CONTROL_TYPE_LIST) {
        return 'FvSelect'
      } else if (controlType === ConstDef.CONTROL_TYPE_SWITCH) {
        return 'FvSwitch'
      } else if (controlType === ConstDef.CONTROL_TYPE_TREE) {
        return 'TreeInput'
      } else if (controlType === ConstDef.CONTROL_TYPE_FILTER_SELECT) {
        return 'FvFilterSelect'
      } else if (controlType === ConstDef.CONTROL_TYPE_AUTO_COMPLETE) {
        return 'AutoComplete'
      } else if (controlType === ConstDef.CONTROL_TYPE_DATA_SOURCE_SELECT) {
        return 'DataSourceSelect'
      } else if (controlType === ConstDef.CONTROL_TYPE_FILTER_INPUT) {
        return 'FvFilterInput'
      } else if (controlType === ConstDef.CONTROL_TYPE_DATE_INPUT) {
        return 'FvDateInput'
      } else if (controlType === ConstDef.CONTROL_TYPE_DATETIME_INPUT) {
        return 'FvDatetimeInput'
      } else if (controlType === ConstDef.CONTROL_TYPE_TEXT_AREA) {
        return 'FvTextArea'
      } else if (controlType === ConstDef.CONTROL_TYPE_TREE_SELECT) {
        return "FvTreeSelect";
      } else {
        return 'FvInput'
      }
    })
    return {
      fvLayout,
      componentName,
      ConstDef
    }
  },
  methods: {
    handleEvent(event) {
      this.$emit("define-event", event);
    },
    lostFocus() {
      console.log('lostFocus')
    }
  }
}
</script>

<style scoped>

</style>
